<template>
  <div>
    <h1>{{ count }} -- {{ hi }} -- {{ num }} -- {{ userName }}</h1>
    <button @click="fn(3)">点击</button>
  </div>
</template>

<script>
// vuex内置四个辅助函数
import { mapActions, mapGetters, mapMutations, mapState } from "vuex"
export default {
  data() {
    return {

    }
  },
  methods: {
    //  mapActions mapMutations
    // 无起名要求
    // ...mapActions(['handleChange'])
    //  起的名字:调用的
    ...mapActions({
      fn: "handleChange"
    }),
    handle() {
      console.log('新方法');

    }
  },
  computed: {
    // 访问子模块   主模块无模块名称
    // mapxxx('模块名称',['属性1','属性2','属性三'....])
    // mapxxxs('模块名字',{
    //  '新名字1':'vuex'中的原名字1,
    //  '新名字2':'vuex'中的原名字2
    // })


    // 函数 通过剩余运算符调用
    // mapGetters mapState 在computed中
    // 相当于 this.$store.state  mapState中数组的名字要跟vuex中的一致
    ...mapState(["count", "hi"]),
    ...mapGetters(['num']),
    // 调用子模块
    ...mapState('user', ['userName'])
  }
}

</script>

<style lang="scss" scoped></style>